<template>
  <div>
    <div class="mt-1">
      <!-- 单元格与日期区间 -->
      <van-cell title="单据日期" :value="date" @click="show = true" />
      <van-calendar
        v-model="show"
        type="range"
        color="#1989fa"
        @confirm="onConfirm"
        :min-date="minDate"
        :max-date="
          new Date(
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate()
          )
        "
      />
      <!-- 搜索框 -->
      <van-search
        v-model="keyword"
        placeholder="请输入搜索单据编号"
        label="单据编号"
        left-icon=" "
        @search="onSearch"
        @input="OnInput"
        class="search"
      />
      <!-- 表格数据 -->
      <ag-grid-vue
        style="width: 100%; height: 70vh"
        class="ag-theme-alpine mt-1"
        :columnDefs="columnDefs"
        :rowData="rowData"
        :defaultColDef="defaultColDef"
        :gridOptions="gridOptions"
        :singleClickEdit="true"
        rowSelection="single"
      >
      </ag-grid-vue>
      <!-- 按键 -->
      <div class="btn">
        <van-button type="primary" class="mt-1" @click="Find">查询</van-button>
        <van-button type="info" class="mt-1" @click="Confirm">确定</van-button>
        <van-button type="warning" class="mt-1" @click="Detail"
          >明细</van-button
        >
      </div>
    </div>
    <!-- 明细弹出层 -->
    <van-popup v-model="ifshowDetails" position="right" round>
      <po-details :newMessage="newMessage" />
    </van-popup>
  </div>
</template>

<script>
import { PostOrder, PostDetail } from "../../assets/api/post";
import { AgGridVue } from "ag-grid-vue";
import PoDetails from "./DetailPO.vue";
export default {
  name: "orderNumber",
  data() {
    return {
      date: "",
      show: false,
      ifshowDetails: false,
      minDate: new Date(2018, 0, 1),
      number: "",
      startdate: "",
      lastdate: "",
      keyword: "",
      result: {},
      defaultColDef: {
        flex: 1,
        resizable: true,
      },
      gridApi: null,
      gridOptions: {
        enableCellChangeFlash: true,
      },
      columnDefs: [
        {
          headerName: "单据编号",
          field: "purNo",
        },
        {
          headerName: "收货工厂",
          field: "plantcode",
        },
      ],
      rowData: [], //点击查找之后呈现的数据
      findData: [], //拿过来的数据
      copyrowData: [], //接口数据
      copyNum: [], //当搜索框为空时的数据
      newMessage: [],
    };
  },
  components: { AgGridVue, PoDetails },
  methods: {
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} 到 ${this.formatDate(end)}`;
      this.startdate = this.formatDate(start);
      this.lastdate = this.formatDate(end);
    },
    Confirm() {
      //确认按键
      let selectedData = this.gridApi.getSelectedRows();
      if (selectedData[0] == null) {
        this.$toast("请选择数据");
      } else {
        PostDetail("/api/IMSPDA/getPurItem", {
          OrderNO: selectedData[0].purNo,
        }).then((res) => {
          this.newMessage = res.data.data;
          this.$emit("get_date", this.newMessage);
        });

        this.$store.state.numpo = selectedData[0].plantcode;
        this.$store.state.purno = selectedData[0].purNo;
        this.$emit("close", this.startdate, this.lastdate, this.keyword);
        this.rowData = [];
      }
    },
    onSearch() {
      //搜索框功能
      let _this = this;
      this.gridApi.forEachNode(function (node) {
        if (node.data.purNo == _this.keyword) {
          _this.result = node.data;
          _this.rowData = [_this.result];
        }
      });
    },
    Detail() {
      //明细按钮
      //获取选中数据的单据编号
      let selectedData = this.gridApi.getSelectedRows();
      if (selectedData[0] == null) {
        this.$toast("请选择数据");
      } else {
        PostDetail("/api/IMSPDA/getPurItem", {
          OrderNO: selectedData[0].purNo,
        }).then((res) => {
          this.newMessage = res.data.data;
          // console.log(this.newMessage);
          if (this.newMessage[0] == null) {
            this.$toast("查不到数据");
          }
          if (res.status == 200) {
            this.ifshowDetails = true;
          } else {
            this.$toast("后台报错，无法查看明细");
          }
        });
      }
    },
    OnInput() {
      if (this.keyword == "") {
        this.rowData = this.copyNum;
      }
    },
    defaultDate() {
      let tomorrow = new Date(
        new Date().getFullYear(),
        new Date().getMonth(),
        new Date().getDate()
      );
      let before7 = new Date(2018, 0, 1);
      this.date = `${this.formatDate(before7)} 到 ${this.formatDate(tomorrow)}`;
      this.startdate = this.formatDate(before7);
      this.lastdate = this.formatDate(tomorrow);
    },
    Find() {
      this.findData.length = 0;
      PostOrder("/api/IMSPDA/getPurOrder", {
        sdate: this.startdate,
        edate: this.lastdate,
        keys: this.keyword,
      }).then((res) => {
        this.copyrowData = res.data.data;
        if (this.copyrowData[0] == null) {
          this.$toast("查不到数据");
          this.rowData = [];
        }
        this.copyrowData.map((item) => {
          this.findData.push(
            Object.assign({
              purNo: item.purNo,
              plantcode: item.plantcode,
            })
          );
        });
      });
      this.rowData = this.findData;
    },
  },
  mounted() {
    this.gridApi = this.gridOptions.api;
    this.defaultDate();
  },
};
</script>

<style scoped>
.ag-theme-alpine {
  border-left-width: 0;
  border-right-width: 0;
  font-size: 0.75rem;
}
.search {
  padding-left: 0;
  padding-right: 0;
}
.btn {
  display: flex;
  justify-content: space-evenly;
}
.van-button {
  width: 6rem;
}
</style>